<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
		<script src="https://static.91haoka.cn/vue.min.js"></script>
		<script src="https://static.91haoka.cn/vantall.js"></script>
		<script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		
		<!-- 快手回调用 -->
		<script type="text/javascript">
			(function(root) {
				var ksscript = document.createElement('script');
				ksscript.setAttribute('charset', 'utf-8');
				ksscript.src = '//p2-yx.adkwai.com/udata/pkg/ks-ad-trace-sdk/ks-trace.3.2.0.min.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ksscript, s);
			})(window);
		</script>
		
	</head>
	<style type="text/css">
		* {
			box-sizing: border-box;
			font-family: 'PingFang SC';
			font-size: 14px;
		}
		[v-cloak] {
			display: none;
		}

		.center {
			padding: 0.2rem 0;
		}

		.smalltitle {
			color: #3976ff;
			padding: 0.2rem;
			border-bottom: 1px #EAEAEA solid;
			padding-left: 0.5rem;
			font-weight: bold;
			background: url(https://cdn.91haoka.cn/xian.png) no-repeat 0.1rem center;
			background-size: 16px;
		}

		.title {
			border-bottom: 1px #EAEAEA solid;
			line-height: 0.8rem;
			padding: 0 0.2rem;
		}

		.footer img {
			width: 100%;
			display: block;
		}

		.flex {
			display: flex;
		}

		.li {
			line-height: 0.8rem;
			padding: 0 0.5rem;
		}

		.tishi {
			flex-basis: 1.5rem;
			color: #666;
		}

		.neirong {
			flex-basis: 5rem;
			position: relative;
		}

		.van-field__control {
			color: #333;
		}

		.where {
			padding: 0px 16px;
			color: #333;
		}

		.w1 {}

		.code {
			position: absolute;
			right: 0;
			z-index: 98;
			height: 0.5rem;
			font-size: 12px;
		}

		.ps {
			font-size: 12px;
			padding: 0.2rem 0.5rem;
			color: #999;
			line-height: 0.4rem;
		}

		.ps2 {
			font-size: 12px;
			padding: 0.0rem 0.5rem;
			display: flex;
			justify-content: space-between;
			color: #e8b004;
			line-height: 0.4rem;
		}

		.buy {
			padding: 0.2rem 0.5rem;
		}

		.buy button {
			height: 40px;
			line-height: 38px;
		}

		.van-radio {
			margin-bottom: 0.15rem;
		}

		.tc {
			border: 1px #EAEAEA solid;
			padding-left: 0.2rem;
			margin-bottom: 0.1rem;
			line-height: 0.6rem;
			border-radius: 3px;
			background: #FFFFFF;
		}

		.act {
			background: #1989fa !important;
			color: #FFFFFF;
		}

		.van-button--disabled {
			background: #FFFFFF;
			color: #1989fa;
		}

		.van-button,
		.van-button--large,
		.buy button {
			height: auto;
			line-height: 25px;
			
		}
		.van-button span{ font-size: 12px;}
		.van-uploader{ width: 100%;height: 100%;}
		.van-uploader__wrapper{ width: 100%;height: 100%;}
		.van-uploader__upload{ width: 100%;height: 100%;}
		.van-uploader__input-wrapper{ width: 100%;height: 100%;}
		img{max-width: 100%; max-height: 100%;}
		.van-cell{ background: transparent;}
		.van-popup{ background: transparent !important; color: #fff;}
	</style>

	<body>
		<div id="app" style="background: #F1F1F1; min-height: 100vh; padding:0.2rem 0.2rem 1.2rem;" v-cloak>

			<div class="top" v-if="!shuruzhong">
				<div class="topimg">
					<img :src="item.details">
				</div>
				<div class="fuwenben" style="word-wrap: break-word;" v-html="item.description"></div>
			</div>
			
			<!-- <div class="flex" style="background: #fff; border-radius:5px; padding:0.2rem;">
				<div style="width: 1.8rem; max-height:1.8rem; overflow:hidden;"><img :src="item.pic" class="bor"></div>
				<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
					<div style="font-weight: bold; font-size: 0.32rem;">{{item.sale_name}}</div>
					<div style="text-align: right; font-weight: bold;">￥{{item.price}}</div>
				</div>
			</div> -->
			<div v-if="peizhi.xiantianxie == 1">
				<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; ">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">个人信息</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">姓名</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_name" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">身份证号码</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_num" placeholder="系统已加密，请放心填写" />
						</div>
					</div>
				</div>
				
				<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem;">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">配送信息</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;" v-if="!peizhi.shouhuorenxingming">
						<div style="width: 1.8rem; overflow:hidden;">收货人</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.name" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">联系电话</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.mobile" type="tel" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid; position:relative;" v-if="peizhi.duanxin">
						<div style="width: 1.8rem; overflow:hidden;">验证码</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<div class="code" style="right: 0rem; top:0.2rem; "><van-button type="info" size="small" @click="getcode" type="tel" :disabled="yzmuse" style="font-size: 12px;" >{{yzm}}</van-button></div>
							<van-field v-model="all.code" placeholder="请输入验证码" />
						</div>
					</div>
				
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">所在地区</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem; line-height:44px; position:relative;" @click="showPopup">
							<div class="where">{{shengshiqu}}
								<van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
							</div>
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">详细地址</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.address" placeholder="请输入详细地址"  />
						</div>
					</div>
					<!-- <div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">上传相关证件</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038;  text-align:right;">
							<van-icon name="arrow" size="14" style=" line-height:44px;" />
						</div>
					</div> -->
					
					
					<div v-if="peizhi.shenfenzheng">
						<div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0">
							根据有关部门要求，必须上传真实身份证照片。<span style="color: #f00;">未上传照片，订单无效。</span>
						</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead1"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.face_url"><img :src="all.face_url" style="width: 3rem; "></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.face_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/face.jpg" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead2"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.back_url"><img :src="all.back_url" style="width: 3rem;"></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.back_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/back.jpg" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.hand_url"><img :src="all.hand_url" style="width: 3rem;"></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.hand_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/head.png" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</div>
					</div>
					
					<div style="font-size: 12px; margin: 0.2rem 0rem; display: flex; flex-wrap: wrap; align-items: center;" v-if="peizhi.ruwangxieyi == 1">
						<van-checkbox v-model="checked" style="margin-right: 0.1rem; font-size: 12px;">我已阅读并同意</van-checkbox>
						<span style="color: #007AFF;font-size: 12px;" @click="log1 = true">《客户入网许可协议及服务协议》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log2 = true">《转卖或转借电话卡风险告知书》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log3 = true">《个人信息收集证明》</span>
					</div>
				</div>
			</div>
			<!-- nc的需求 -->
			<div v-if="peizhi.xiantianxie == 2">
				<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; ">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">个人信息</div>
					<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
						<div style="width: 1.6rem; overflow:hidden;">办理人姓名</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_name" placeholder="请输入办理人姓名" />
						</div>
					</div>
					<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
						<div style="width: 1.6rem; overflow:hidden;">联系电话</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.mobile" placeholder="请输入联系电话" />
						</div>
					</div>
					
					<div v-if="all.id_name && all.mobile.length == 11">
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
							<div style="width: 1.6rem; overflow:hidden;">办理人身份证</div>
							<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<van-field v-model="all.id_num" placeholder="请输入办理人身份证" />
							</div>
						</div>
						
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;" v-if="!peizhi.shouhuorenxingming">
							<div style="width: 1.6rem; overflow:hidden;">收货人</div>
							<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<van-field v-model="all.name" placeholder="请输入收货人" />
							</div>
						</div>
						
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem; position:relative;" v-if="peizhi.duanxin">
							<div style="width: 1.6rem; overflow:hidden;">验证码</div>
							<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<div class="code" style="right: 0rem; top:0.2rem; "><van-button type="info" size="small" @click="getcode" type="tel" :disabled="yzmuse" style="font-size: 12px;" >{{yzm}}</van-button></div>
								<van-field v-model="all.code" placeholder="请输入验证码" />
							</div>
						</div>
										
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
							<div style="width: 1.6rem; overflow:hidden;">所在地区</div>
							<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem; line-height:44px; position:relative;" @click="showPopup">
								<div class="where">{{shengshiqu}}
									<van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
								</div>
							</div>
						</div>
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
							<div style="width: 1.6rem; overflow:hidden;">详细地址</div>
							<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<van-field v-model="all.address" placeholder="请输入详细地址" />
							</div>
						</div>
						
						<div v-if="peizhi.shenfenzheng">
							<div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0">
								根据有关部门要求，必须上传真实身份证照片。<span style="color: #f00;">未上传照片，订单无效。</span>
							</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead1"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.face_url"><img :src="all.face_url" style="width: 3rem; "></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.face_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/face.jpg" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead2"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.back_url"><img :src="all.back_url" style="width: 3rem;"></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.back_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/back.jpg" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.hand_url"><img :src="all.hand_url" style="width: 3rem;"></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.hand_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/head.png" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</div>
						</div>
					</div>
					<div style="font-size: 12px; margin: 0.2rem 0rem; display: flex; flex-wrap: wrap; align-items: center;" v-if="peizhi.ruwangxieyi == 1">
						<van-checkbox v-model="checked" style="margin-right: 0.1rem; font-size: 12px;">我已阅读并同意</van-checkbox>
						<span style="color: #007AFF;font-size: 12px;" @click="log1 = true">《客户入网许可协议及服务协议》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log2 = true">《转卖或转借电话卡风险告知书》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log3 = true">《个人信息收集证明》</span>
					</div>
					
				</div>
			</div>
			
			
			<!-- <div class="top">
				<div class="topimg">
					<img :src="item.details">
				</div>
			</div> -->
			
			<div class="fixed" style="bottom: 0; background: #fff; z-index: 99;">
				<div class="flexbc">
					<div class="flexcc" style="padding-left: 0.3rem; font-size: 0.26rem;">福利价：<div
							style="color: #FF3400;">
							<span style="font-size: 0.35rem;">￥{{item.price}}</span>
						</div>
					</div>
					<div style="background: #FF3400;  padding: 0.3rem 0.5rem; color: #fff; font-size: 0.3rem;" v-if="tijiaoing" @click="tijiao">提交订单</div>
					<div style="background: #FF3400;  padding: 0.3rem 0.5rem; color: #fff; font-size: 0.3rem;" v-if="!tijiaoing">提交订单中...</div>
				</div>
			</div>

			<van-popup v-model="show" position="bottom">
				<van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="queren" @cancel="quxiao" />
			</van-popup>
			<van-popup v-model="jiazaizhong" :close-on-click-overlay="false"><van-loading type="spinner" color="#fff" /></van-popup>
			<!-- <van-popup v-model="show2" position="bottom"
				style="padding: 0.4rem 0.3rem; color: #2D3038; border-radius: 0.2rem 0.2rem 0 0;">
				<div class="flexb" style="font-size: 0.32rem; font-weight: bold;">
					<div style="font-size: 0.32rem; font-weight: bold;">确认订单信息</div>
					<div @click="show2 = false"><img src="img/g.png" style="width: 0.32rem;"></div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F;  font-size: 0.25rem;">商品名称</div>
					<div style="font-size: 0.25rem;">{{person.sale_name}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货人</div>
					<div style="font-size: 0.25rem;">{{name}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货电话</div>
					<div style="font-size: 0.25rem;">{{mobile}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货地址</div>
					<div style="width: 5rem; text-align: right; font-size: 0.25rem;">{{shengshiqu}}{{address}}</div>
				</div>
				<div class="flexcc bor" style="background: #3FCF77; color: #fff; padding: 0.2rem 0; margin-top: 0.4rem;"
					@click="guozhengtong" v-if="tijiaoing">
					<div><img src="img/w.png" style="width: 0.4rem; margin-right: 0.2rem;"></div>
					<div>微信支付</div>
				</div>
				<div class="flexcc bor" style="background: #3FCF77; color: #fff; padding: 0.2rem 0; margin-top: 0.4rem;"
					v-if="!tijiaoing">
					<div><img src="img/w.png" style="width: 0.4rem; margin-right: 0.2rem;"></div>
					<div>订单提交中...</div>
				</div>
			</van-popup> -->
		</div>




		<script>
			var h = document.documentElement.clientWidth / 7.5 + 'px';
			document.documentElement.style.fontSize = h;
			

			
			new Vue({
				el: '#app',
				data: function() {
					return {
						tijiaoing:true,
						monitorKeyboard:null,
						inputVal:'',
							  
						shuruzhong:false,
						areaList: "",
						shengshiqu: "点击选择所在地区",
						show: false,
						yzm: "获取验证码",
						yzmnum: 60,
						yzmuse: false,
						checked:false,
						apis:"",
						peizhi:"",
						item:"",
						all:{
							id:"",
							id_name:"",
							id_num:"",
							name:"",
							mobile:"",
							code:"",
							
							address:"",
							province:"",
							city:"",
							district:"",
							
							face_url:"",
							back_url:"",
							hand_url:"",
							
							pay_method:1,//	1	是	string	1微信2支付宝
							openid:"",
							
							clickid:localStorage.getItem('clickid'),
							creativeid:localStorage.getItem('creativeid'),
							creativetype:localStorage.getItem('creativetype'),
							adid:localStorage.getItem('adid'),
						},
						jiazaizhong:true
					}
				},
				async created() {
					
					// https://static.91haoka.cn/areanew.json
					// https://static.91haoka.cn/tongyidiqu.json
					await axios.get("https://static.91haoka.cn/areanew.json")
						.then(response=> {
							this.areaList = response.data
						})
					var that = this
					this.id = this.getUrlParam('id')	
					this.all.id = this.getUrlParam('id')	
	
					if (location.href.includes('localhost')) {
						this.apis = '/apis'
					}
					this.getpeizhi()
					
					let p = this.getitem()
					p.then(item=>{
						if(this.item.price == 0){
							
						}else{
							var wx = window.navigator.userAgent.toLowerCase();
							if (wx.match(/MicroMessenger/i) == 'micromessenger') {
								this.all.pay_method = 3 
								
								if (this.getUrlParam('code')) {
									this.code = this.getUrlParam('code')
									axios.get(`${this.apis}/api/wechat/code2token?code=${this.code}`)
									    .then(response => {
									        if(response.data.msg.code == 0){
												if(response.data.data.errcode){
													axios.get(`${this.apis}/api/wechat/code?url=${window.location}`)
													    .then(response => {
													        if(response.data.msg.code == 0){
													            window.location.href = response.data.data
													        }else{
													            vant.Toast(response.data.msg.info);
													        }
													    })
												}
									            this.all.openid = response.data.data.openid
									        }else{
												vant.Toast(response.data.msg.info);
									        }
									    })
								} else {
									axios.get(`${this.apis}/api/wechat/code?url=${window.location}`)
									    .then(response => {
									        if(response.data.msg.code == 0){
									            window.location.href = response.data.data
									        }else{
									            vant.Toast(response.data.msg.info);
									        }
									    })
								}
							}
						}
					})
					
					
					
					
					
					

					// axios.post(that.links + '/api/wechat/code', {"token":that.code,"appid":"wx2d18b51e3875af9a","scope":"userinfo"})
					//     .then(response => {
					//         if(response.data.msg.code == 0){
					//             console.log("登陆成功")
					//             that.loading = false
					//         }else{
					//             that.$message.error(response.data.msg.info);
					//         }
					//     })

				},
				mounted() {
					window.addEventListener('scroll', this.scrollToTop)
				
				},
				methods: {
					
					
					// kaishishuru:function(){
					// 	this.$nextTick(()=>{
					// 		this.shuruzhong = true
					// 	})
					// },
					// tingzhishuru:function(){
					// 	this.$nextTick(()=>{
					// 		this.shuruzhong = false
					// 	})
					// },
					getpeizhi:function(){
						
							axios.get(`${this.apis}/storage/web-page/${this.id}.json?v=${Math.random()}`)
							.then(response => {
								this.peizhi = JSON.parse(response.data)
								if(!this.peizhi.xiantianxie){
									this.peizhi.xiantianxie = 1
								}
								console.log(this.peizhi)
								if(this.peizhi.bufahuodiqu == 1){
									let data = this.areaList.province_list
									let data2 = this.areaList.city_list
									let data3 = this.areaList.county_list							
									
									if(this.peizhi.delivery_city != ''){
										let obj = {}
										let obj2 = {}
										let obj3 = {}
										this.peizhi.delivery_city.forEach(items => {
											
											if(items[0]){
												Object.keys(data).map((key1, item1) => {
													if (items[0] == key1) {
														obj[key1] = data[key1]
													}
												})
											}
											if(items[1]){
												Object.keys(data2).map((key2, item2) => {
													if (items[1] == key2) {
														obj2[key2] = data2[key2]
													}
												})
											}			
											if(items[2]){
												Object.keys(data3).map((key3, item3) => {
													if (items[2] == key3) {
														obj3[key3] = data3[key3]
													}
												})
											}	
																	
										})
										
										this.areaList.province_list = obj
										this.areaList.city_list = obj2
										this.areaList.county_list = obj3
									}
									
								}
								if (this.peizhi.bufahuodiqu == 3) {
									let data = JSON.parse(JSON.stringify(this.areaList.province_list)) 
									let data2 = JSON.parse(JSON.stringify(this.areaList.city_list))
									let data3 = JSON.parse(JSON.stringify(this.areaList.county_list))
									
									
									
									// this.peizhi.bufahuosheng.forEach(items => {
									// 	Object.keys(data).map((key1, item1) => {
									// 		if (items == key1) {
									// 			delete this.areaList.province_list[items]
									// 		}
									// 	})			
									// })
									// this.peizhi.no_city.forEach(items => {											
									// 	Object.keys(data2).map((key2, item2) => {
									// 		if (items[1] == key2) {
									// 			delete this.areaList.city_list[key2]
									// 		}
									// 	})					
									// })
									this.peizhi.no_city.forEach(items => {
										Object.keys(data3).map((key3, item3) => {
											if (items[2] == key3) {
												delete this.areaList.county_list[key3]
											}
										})			
										
									})
									
									
								}
								
							})
							
						
						
					},
					getitem:function(){
						return new Promise((res,rej)=>{
							axios.get(`${this.apis}/api/page/info?id=${this.id}`)
								.then(response => {
									if(response.data.data != '' && response.data.data){
										this.item = response.data.data
										document.title = response.data.data.sale_name
										this.item.json = JSON.parse(this.item.json)
										this.jiazaizhong = false
										res('ok')
									}else{
										document.title = '商品已下架'
										vant.Toast(response.data.msg.info);
									}
									
									// this.is_need_photo = this.person.is_need_photo
								})
						})
					},
					
					dataURLtoFile(dataurl, filename) {
					  let arr = dataurl.split(","),
					    mime = arr[0].match(/:(.*?);/)[1],
					    bstr = atob(arr[1]),
					    n = bstr.length,
					    u8arr = new Uint8Array(n);
					  while (n--) {
					    u8arr[n] = bstr.charCodeAt(n);
					  }
					  return new File([u8arr], filename, {
					    type: mime
					  });
					},
					uploadok: function(file,who) {
					  var that = this;
					  var reader = new FileReader()
					  var img = new Image();
					  reader.onload = function(e) {
					    img.src = e.target.result;
					  };
					  var canvas = document.createElement('canvas');
					  var context = canvas.getContext('2d');
					  // base64地址图片加载完毕后
					  let p = new Promise((r, j) => {
					    img.onload = function() {
					      // 图片原始尺寸
					      var originWidth = this.width;
					      var originHeight = this.height;
					      // 最大尺寸限制
					      var maxWidth = 1920,
					        maxHeight = 1080;
					      // 目标尺寸
					      var targetWidth = originWidth,
					        targetHeight = originHeight;
					      // 图片尺寸超过400x400的限制
					      if (originWidth > maxWidth || originHeight > maxHeight) {		              if (originWidth / originHeight > maxWidth / maxHeight) {
					           // 更宽，按照宽度限定尺寸                  targetWidth = maxWidth;                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
					          } else {                  targetHeight = maxHeight;
					           targetWidth = Math.round(maxHeight * (originWidth / originHeight));		              }
					      }
					      // canvas对图片进行缩放
					      canvas.width = targetWidth;
					      canvas.height = targetHeight;
					      // 清除画布
					      context.clearRect(0, 0, targetWidth, targetHeight);
					      // 图片压缩
					      context.drawImage(img, 0, 0, targetWidth, targetHeight);
					
					      let base64 = canvas.toDataURL("image/jpeg", 0.8); // 压缩后的base64图片
					      let file2 = that.dataURLtoFile(base64, Date.parse(Date()) + ".jpg");
						  r(file2)
					    };
					  })
					  reader.readAsDataURL(file);
					  p.then(files => {
						  
						  axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						  	.then(response => {
						  	var qiniudata = new FormData();
						  		qiniudata.append('file', files);
						  		qiniudata.append('token',response.data.data);
						  		
						  		axios.post('https://upload.qiniup.com',qiniudata)
						  			.then(response => {
						  				this.all[who] = 'https://pic.91haoka.cn/' + response.data.key
						  			})
						  })
						  
					    // var formData = new FormData();
					    // formData.append("file", files);
					    // formData.append("type", 'pic');
					    // axios.post(`${this.apis}/api/system/upload`, formData)
					    //   .then(response => {
					    //     if (response.data.msg.code == 0) {
					    //       that.img = response.data.data
					    //       that.$emit('getimg', response.data.data)
					    //     } else {
					    //       that.$message.error(response.data.msg.info);
					    //     }
					    //   })
					  })
					},
					
					afterRead1: function(file) {
						this.uploadok(file.file,'face_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
								
						// 		axios.post('https://upload.qiniup.com',qiniudata)
						// 			.then(response => {
						// 				this.all.face_url = 'https://pic.91haoka.cn/' + response.data.key
						// 			})
						// })
					},
					afterRead2: function(file) {
						this.uploadok(file.file,'back_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
						// 	axios.post('https://upload.qiniup.com',qiniudata)
						// 		.then(response => {
						// 			this.all.back_url = 'https://pic.91haoka.cn/' + response.data.key
						// 		})
						// })
					},
					afterRead3: function(file) {
						this.uploadok(file.file,'hand_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
						// 	axios.post('https://upload.qiniup.com',qiniudata)
						// 		.then(response => {
						// 			this.all.hand_url = 'https://pic.91haoka.cn/' + response.data.key
						// 		})
						// })
					},
					//获取url的code用
					getUrlParam: function(name) {
						var query = window.location.search.substring(1);
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == name) {
								return pair[1];
							}
						}
						return (false);
					},
			// 		scrollToTop() {
			// 			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
			// 				.scrollTop;
			
			// 			if (scrollTop > 1000) {
			// 				this.scrollTopshow = true
			// 			} else {
			// 				this.scrollTopshow = false
			// 			}
			// 		},
			// 		backtop: function() {
			// 			window.scrollTo(0, 376);
			// 		},
					
					//支付
					// fukuan: function() {
					// 	this.dialog = false
					// 	this.num = 3
					// 	this.dianba = true
					// 	var that = this
					// 	axios.post(this.urls + '/api/recharge/hua-pay', {
					// 			mobile: this.input,
					// 			product_id: this.li,
					// 			payment_method: "wx_mp"
					// 		})
					// 		.then(response => {
					// 			if (response.data.msg.code == 0) {
					// 				WeixinJSBridge.invoke(
					// 					'getBrandWCPayRequest', {
					// 						"appId": "wx2d18b51e3875af9a",
					// 						'timeStamp': response.data.data.payInfo.timeStamp,
					// 						'nonceStr': response.data.data.payInfo.nonceStr,
					// 						'package': response.data.data.payInfo.package,
					// 						'signType': 'MD5',
					// 						'paySign': response.data.data.payInfo.paySign,
					// 					},
					// 					function(res) {
					// 						if (res.err_msg == "get_brand_wcpay_request:ok") {}
					// 					});
					// 			} else {
					// 				that.$message.error(response.data.msg.info);
					// 			}
					// 		})
					// },
					//验证是否可以提交
					// go: function() {
					// 	if (this.mobile.length != 11) {
					// 		vant.Toast('请填写正确手机号');
					// 		return false
					// 	}
					// 	if (this.address == "" || this.name == "" || this.sheng == "") {
					// 		vant.Toast('请填写完整信息');
					// 		return false

					// 	} else {
					// 		this.show2 = true
					// 	}
					// },
					//姓名写入 出身份证
					// namewrite: function() {
					// 	this.cardshow = true
					// },
					
					//弹出省市区
					showPopup: function() {
						this.show = true
					},
					//省市区确认
					queren: function(v) {
						if (!v[0].code || !v[1].code || !v[2].code) {
							vant.Toast('请完整选择省市区');
							return false
						}
						this.all.province = v[0].name
						this.all.provincecode = v[0].code
						this.all.city = v[1].name
						this.all.citycode = v[1].code
						this.all.district = v[2].name
						this.all.districtcode = v[2].code
						
						this.shengshiqu = this.all.province + '  ' + this.all.city + '  ' + this.all.district
						
						this.show = false
					},
					//省市区取消
					quxiao: function() {
						this.show = false
					},
					//获取验证码
					getcode: function() {
						var that = this;
						if (this.all.mobile.length != 11) {
							vant.Toast("请输入正确手机号");
							return;
						}
						that.yzmnum = 60;
						that.timer = setInterval(function() {
							if (that.yzmnum == 0) {
								clearInterval(that.timer);
								that.yzm = '获取验证码';
								that.yzmuse = false
							} else {
								that.yzmuse = true
								that.yzm = that.yzmnum + '秒重新获取';
								that.yzmnum = that.yzmnum - 1;
							}
						}, 1000);
						
						axios.post(`${this.apis}/api/system/code/send`, {mobile:this.all.mobile,id:this.id})
							.then(function(response) {
								if (response.data.msg.code == 0) {
									vant.Toast("验证码已发送");
								}
							})
					},

					//验证码校验
					checkCode: function() {
						var that = this
						return new Promise((res,rej)=>{
							axios.post(`${this.apis}/api/system/code/check`,{
								mobile:this.all.mobile,
								code:this.all.code
							}).then(response => {
									if (response.data.msg.code == 0) {
										if(response.data.data){
											res('ok')
										}else{
											vant.Toast('请输入正确的验证码');
										}
										
									} else {
										vant.Toast(response.data.msg.info);
										
									}			
								})
						})
					},
					// qufukuan: function() {
					// 	this.show2 = true
					// },
					//国政通
					guozhengtong: function() {
						if (this.all.id_num.length != 18) {
							vant.Toast("请填写正确身份证号码！");
							return false
						}
						
						return new Promise((res,rej)=>{
							axios.post(`${this.apis}/api/id/check`,{
								name:this.all.id_name,
								id_num:this.all.id_num,
								id:this.id
							}).then(response => {
									if (response.data.msg.code == 0) {
										if(response.data.data == 'success'){
											res('ok')
										}else{
											vant.Toast('请填写正确的姓名和身份证号码');
										}
									} else {
										vant.Toast(response.data.msg.info);
										
									}			
								})
						})
					},
					tijiaogo:function(){
						var that = this
						this.tijiaoing = false
						//1微信外 2支付宝  3微信内
						axios.post(`${this.apis}/api/store/purchase`, this.all)
							.then(response=> {
								if (response.data.msg.code == 0) {
									// vant.Toast('下单成功');
									if(this.item.price == 0){
										//快手回调
										if(this.peizhi.kuaishou){
											_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
												console.log('Your callback function here!')
											}})
											setTimeout(()=>{
												window.location.href = './success.html?tab='+this.item.tab
											},500)
										}else{
											setTimeout(()=>{
												window.location.href = './success.html?tab='+this.item.tab
											},500)
										}	
									}else{
										var wx = window.navigator.userAgent.toLowerCase();
										if (wx.match(/MicroMessenger/i) == 'micromessenger') {
											WeixinJSBridge.invoke(
											 'getBrandWCPayRequest', {
											      "appId":response.data.data.appId,    
											      'timeStamp': response.data.data.timeStamp,
											      'nonceStr': response.data.data.nonceStr,
											      'package': response.data.data.package,
											      'signType': 'MD5',
											      'paySign': response.data.data.paySign,
											 },
											 function(res){
											       if(res.err_msg == "get_brand_wcpay_request:ok" ){
													   //快手回调
													   if(that.peizhi.kuaishou){
															_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
																console.log('Your callback function here!')
															}})
															setTimeout(()=>{
																window.location.href = './success.html?tab='+this.item.tab
															},500)
													   }else{
														   setTimeout(()=>{
														   	window.location.href = './success.html?tab='+this.item.tab
														   },500)
													   }
													   
													   
												   }else{
													   
												   }
											 }); 
										}else{
											//快手回调
											if(that.peizhi.kuaishou){
												_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
													console.log('Your callback function here!')
												}})
												setTimeout(()=>{
													window.location.href = response.data.data.h5_url
												},500)
											}else{
												setTimeout(()=>{
													window.location.href = response.data.data.h5_url
												},500)
											}
											
										}
										that.tijiaoing = true
									}
								} else {
									vant.Toast(response.data.msg.info);
									this.tijiaoing = true
								}
		
							})
					},
					tijiao: function() {
						if(this.peizhi.ruwangxieyi == 1){
							if(!this.checked){
								vant.Toast("请先阅读并同意客服协议！");
								return false
							}
						}
						if (this.all.id_num.length != 18) {
							vant.Toast("请填写正确身份证号码！");
							return false
						}
						if (this.all.mobile.length != 11) {
							vant.Toast("请输入正确手机号");
							return;
						}
						if (!this.all.address || !this.all.province) {
							vant.Toast("请填写地址");
							return;
						}
						
						if(this.peizhi.shenfenzheng){
							if (!this.all.back_url || !this.all.hand_url || !this.all.face_url) {
								vant.Toast("请先上传照片");
								return;
							}
						}
						let guolist = []
						if(this.peizhi.guozhengtong){
							guolist.push(this.guozhengtong())
						}
						if(this.peizhi.duanxin){
							guolist.push(this.checkCode())
						}
						if(this.peizhi.shouhuorenxingming){
							this.all.name = this.all.id_name
						}
						if(guolist != ''){
							Promise.all(guolist).then(()=>{
								this.tijiaogo()
							})
						}else{
							this.tijiaogo()
						}
					}
				}
			});
		</script>
	</body>

</html>
